<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>报考记录</span>
                <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
            </div>
            <el-row style="margin-bottom: 20px">
                <el-col :span="5">
                    <el-select v-model="course" clearable @change="handleRecord(course)" placeholder="请选择">
                        <el-option
                                v-for="item in courseList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-col>
            </el-row>
            <el-empty v-if="examList.length == 0" description="数据为空"></el-empty>
            <el-card  style="margin-bottom: 20px" v-for="item in examList" :key="item.id">
                <el-descriptions title="考试记录">
                    <el-descriptions-item label="科目名称">{{item.course.name}}</el-descriptions-item>
                    <el-descriptions-item label="报考城市">{{item.exam_city}}</el-descriptions-item>
                    <el-descriptions-item label="报考时间">{{item.exam_date}}</el-descriptions-item>
                    <el-descriptions-item label="机构代码">
                        <el-tag size="small">{{item.org_code}}</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="用户名">{{item.user}}</el-descriptions-item>
                </el-descriptions>
            </el-card>
        </el-card>
    </div>
</template>

<script>
    import {courselist} from "../../../request/api";
    import {exam_recordByCourse} from "../../../request/api";
    import {exam_record} from "../../../request/api";
    export default {
        name: "index",
        data() {
            return {
                examList: [],
                searchRecord: '',
                course:null,
                courseList:[]
            }
        },
        methods: {
            getCourseList(){
                courselist().then(res =>{
                    console.log(res);
                    this.courseList = res.results;
                })
            },
            getExamList() {
                exam_record().then(res => {
                    this.examList = res.result;
                    console.log(res)
                })
            },
            handleRecord(courseId) {
                console.log('courseId',courseId)
                exam_recordByCourse(courseId).then(res =>{
                    this.examList = res.result
                })
            }
        },
        created() {
            this.getExamList();
            this.getCourseList();
        }
    }
</script>

<style scoped>
.box-card{
    width: 100%;
}
</style>
